<template>
  <div class="file-manage">
    <div v-if="!showSecondary" class="main">
      <div class="lists">
        <JeList
          class="JE_SYS_ALIOSS"
          :title="$t('files.alyun')"
          :info="$t('files.alyunTip')"
          :is-show="false"
          @listClick="($event) => listClick('JE_SYS_ALIOSS', $event)"
        >
          <template #left
            ><Radio
              v-model:checked="JE_SYS_ALIOSS"
              class="my-checkbox"
              @click="changeSelect('JE_SYS_ALIOSS')"
            ></Radio
          ></template>
        </JeList>
        <JeList
          class="JE_SYS_TENCENTOSS"
          :title="$t('files.txyun')"
          :info="$t('files.txyunTip')"
          :is-show="false"
          @listClick="($event) => listClick('JE_SYS_TENCENTOSS', $event)"
        >
          <template #left
            ><Radio
              v-model:checked="JE_SYS_TENCENTOSS"
              class="my-checkbox"
              @click="changeSelect('JE_SYS_TENCENTOSS')"
            ></Radio
          ></template>
        </JeList>
        <!-- <JeList
          class="JE_SYS_WELINKOSS"
          :title="$t('files.hwyun')"
          :info="$t('files.hwyunTip')"
          :is-show="false"
          :show="true"
          @listClick="($event) => listClick('JE_SYS_WELINKOSS', $event)"
        >
          <template #left
            ><Radio
              v-model:checked="JE_SYS_WELINKOSS"
              class="my-checkbox"
              @click="changeSelect('JE_SYS_WELINKOSS')"
            ></Radio
          ></template>
        </JeList> -->
        <JeList
          class="JE_SYS_HARDDRIVE"
          :title="$t('files.local')"
          :info="$t('files.localTip')"
          :is-show="false"
          @listClick="($event) => listClick('JE_SYS_HARDDRIVE', $event)"
        >
          <template #left
            ><Radio
              v-model:checked="JE_SYS_HARDDRIVE"
              class="my-checkbox"
              @click="changeSelect('JE_SYS_HARDDRIVE')"
            ></Radio
          ></template>
        </JeList>
        <!-- <JeList
          class="JE_SYS_MINIO"
          :title="$t('files.MinIO')"
          :info="$t('files.MinIOTip')"
          :is-show="false"
          :show="true"
          @listClick="($event) => listClick('JE_SYS_MINIO', $event)"
        >
          <template #left
            ><Radio
              v-model:checked="JE_SYS_MINIO"
              class="my-checkbox"
              @click="changeSelect('JE_SYS_MINIO')"
            ></Radio
          ></template>
        </JeList> -->
      </div>
      <div class="tips">
        <p>{{ $t('files.fristTip') }}</p>
        <p>{{ $t('files.secondTip') }}</p>
      </div>
    </div>
    <!-- <div v-else class="secondary">
      <StoreSecondary :secondary-name="secondaryName" :data-all="dataAllSon" @showMain="showMain" />
    </div> -->
  </div>
</template>

<script>
  // import StoreSecondary from './store-secondary.vue';
  import JeList from '@/components/je-list.vue';
  import { Modal, Radio } from '@jecloud/ui';
  import { onUnmounted, reactive, ref } from 'vue';
  import { useOpenDialog } from '@/hooks';
  import VueEvent from '@/helper/model/event';
  import { saveConfigData } from '@/api';
  import { onScroll } from '@/utils/utils';
  export default {
    name: 'FileManage',
    components: {
      JeList,
      Radio,
      // StoreSecondary,
    },
    props: {
      dataAll: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      // 保存数据
      const dataAllSon = reactive(props.dataAll);
      let formState = {
        JE_FILE_STORAGE_TYPE: 'TENCENT',
      };

      // 对比项
      let meta = {};
      let res = {};
      // radio值
      let JE_SYS_ALIOSS = ref(null);
      let JE_SYS_TENCENTOSS = ref(null);
      let JE_SYS_WELINKOSS = ref(null);
      let JE_SYS_HARDDRIVE = ref(null);
      let JE_SYS_MINIO = ref(null);
      // 转换数据
      const changeDataType = (parame) => {
        res = parame.filter((item) => {
          return item.key === 'FileManage';
        });
        res[0]?.items.find((item) => {
          formState[item.code] = item['value'];
        });
        // 单选的判断
        if (formState.JE_FILE_STORAGE_TYPE === 'ALIYUN') {
          JE_SYS_ALIOSS.value = true;
        } else if (formState.JE_FILE_STORAGE_TYPE === 'TENCENT') {
          JE_SYS_TENCENTOSS.value = true;
        } else if (formState.JE_FILE_STORAGE_TYPE === 'HUAWEI') {
          JE_SYS_WELINKOSS.value = true;
        } else if (formState.JE_FILE_STORAGE_TYPE === 'LOCAL') {
          JE_SYS_HARDDRIVE.value = true;
        } else if (formState.JE_FILE_STORAGE_TYPE === 'MINIO') {
          JE_SYS_MINIO.value = true;
        }
        meta = JSON.parse(JSON.stringify(formState));
      };
      changeDataType(props.dataAll);

      const dataCallback = (data) => {
        changeDataType(data);
      };
      // 表单数据是否改变
      const isChange = () => {
        return meta.JE_FILE_STORAGE_TYPE === formState.JE_FILE_STORAGE_TYPE;
      };

      // 点击左侧导航栏判断是否数据已改变
      const isSaveCallback = () => {
        if (showSecondary.value) return false;
        if (isChange()) return changeBar();
        useOpenDialog({
          attribute: 'file-manage',
          allFields: JSON.stringify(formState),
        });
      };

      // 是否显示子页面
      const showSecondary = ref(false);
      // 相应子页面
      const secondaryName = ref(null);
      // 点击切换
      const listClick = (val, bol) => {
        showSecondary.value = bol;
        secondaryName.value = val;
      };
      // 关闭子页面
      const showMain = (val) => {
        showSecondary.value = val;
      };
      // 单项选择点击事件
      const changeSelect = (val) => {
        if (val === 'JE_SYS_ALIOSS') {
          if (JE_SYS_ALIOSS.value === true) return;
          JE_SYS_ALIOSS.value = !JE_SYS_ALIOSS.value;
          JE_SYS_TENCENTOSS.value =
            JE_SYS_WELINKOSS.value =
            JE_SYS_HARDDRIVE.value =
            JE_SYS_MINIO.value =
              false;
          formState.JE_FILE_STORAGE_TYPE = 'ALIYUN';
        } else if (val === 'JE_SYS_TENCENTOSS') {
          if (JE_SYS_TENCENTOSS.value === true) return;
          JE_SYS_TENCENTOSS.value = !JE_SYS_TENCENTOSS.value;
          JE_SYS_ALIOSS.value =
            JE_SYS_WELINKOSS.value =
            JE_SYS_HARDDRIVE.value =
            JE_SYS_MINIO.value =
              false;
          formState.JE_FILE_STORAGE_TYPE = 'TENCENT';
        } else if (val === 'JE_SYS_WELINKOSS') {
          if (JE_SYS_WELINKOSS.value === true) return;
          JE_SYS_WELINKOSS.value = !JE_SYS_WELINKOSS.value;
          JE_SYS_ALIOSS.value =
            JE_SYS_TENCENTOSS.value =
            JE_SYS_HARDDRIVE.value =
            JE_SYS_MINIO.value =
              false;
          formState.JE_FILE_STORAGE_TYPE = 'HUAWEI';
        } else if (val === 'JE_SYS_HARDDRIVE') {
          if (JE_SYS_HARDDRIVE.value === true) return;
          JE_SYS_HARDDRIVE.value = !JE_SYS_HARDDRIVE.value;
          JE_SYS_TENCENTOSS.value =
            JE_SYS_WELINKOSS.value =
            JE_SYS_ALIOSS.value =
            JE_SYS_MINIO.value =
              false;
          formState.JE_FILE_STORAGE_TYPE = 'LOCAL';
        } else if (val === 'JE_SYS_MINIO') {
          if (JE_SYS_MINIO.value === true) return;
          JE_SYS_MINIO.value = !JE_SYS_MINIO.value;
          JE_SYS_TENCENTOSS.value =
            JE_SYS_WELINKOSS.value =
            JE_SYS_HARDDRIVE.value =
            JE_SYS_ALIOSS.value =
              false;
          formState.JE_FILE_STORAGE_TYPE = 'MINIO';
        }
      };

      // 保存的回调
      const clickCallback = () => {
        if (!isChange()) {
          saveConfigData({
            attribute: 'file-manage',
            allFields: JSON.stringify(formState),
            type: '',
          }).then(
            (meta = JSON.parse(JSON.stringify(formState))),
            !showSecondary.value && Modal.notice('保存成功', 'success'),
            VueEvent.emit('changeAllData', { item: 'file-manage', formState }),
          );
        } else {
          // 如果显示了子页面就不提示
          if (!showSecondary.value) {
            Modal.notice('无数据操作!', 'info');
          }
        }
      };

      // 切换左侧导航栏
      const changeBar = () => {
        VueEvent.emit('saveResult', isChange());
      };

      // 搜索：去子页面
      const toSubpage = (data) => {
        const { name, parentName } = { ...data };
        if (parentName) {
          listClick(name, true);
        }
      };

      // 搜索：滚动及动画
      const onScrolled = () => {
        showSecondary.value = false;
        setTimeout(() => {
          onScroll();
        }, 100);
      };
      VueEvent.on('toolbarSaveEvent', clickCallback);
      VueEvent.on('sendData', dataCallback);
      VueEvent.on('isSave', isSaveCallback);
      VueEvent.on('toSubpage', toSubpage);
      VueEvent.on('fadeScroll', onScrolled);
      onUnmounted(() => {
        VueEvent.off('toolbarSaveEvent', clickCallback);
        VueEvent.off('sendData', dataCallback);
        VueEvent.off('isSave', isSaveCallback);
        VueEvent.off('toSubpage', toSubpage);
        VueEvent.off('fadeScroll', onScrolled);
      });

      return {
        showSecondary,
        listClick,
        showMain,
        JE_SYS_ALIOSS,
        JE_SYS_TENCENTOSS,
        JE_SYS_WELINKOSS,
        JE_SYS_HARDDRIVE,
        JE_SYS_MINIO,
        changeSelect,
        secondaryName,
        dataAllSon,
      };
    },
  };
</script>

<style lang="less" scoped>
  .file-manage {
    padding: 30px 100px 0 100px;
    width: 100%;
    font-size: 14px;
    color: #333333;
    .tips {
      margin-top: 30px;
      padding: 12px 0px 0px 20px;
      width: 810px;
      height: 68px;
      border-radius: 2px;
      border: 1px solid #abd09d;
      background: #eff9f2;
      color: #36761f;
      font-size: 14px;
      line-height: 15px;
    }
  }
</style>
